<template>
  <div id="module-root" class="g-wrap m-radio">
    <div class="u-title f-pr f-cb">
      <h3><span class="f-ff2">节目排行榜</span></h3>
      <span class="sub s-fc4">最近更新：08月{{ nowDay }}日</span>
      <div class="info f-pa">
        <a href="javascript:void(0)" class="icon u-icn2 u-icn2-5 j-flag"></a>
        <div class="tip s-fc3 f-brk f-pa j-flag">
          <!-- icon在hover的时候显示tip -->
          选取云音乐中7天内发布的热度最高的节目，每天更新。热度由节目播放、赞、分享数量总和计算。
        </div>
      </div>
    </div>
    <ul class="m-plylist toplist toplist-rank f-cb">
      <li class="itm" v-for="(item, index) in topList" :key="item.program.id">
        <div class="rank col s-fc4">
          <em :class="{ red: index < 3 }">
            {{ index < 9 ? `0${index + 1}` : index + 1 }}</em
          >
          <span
            :class="[
              'u-rnk',
              index + 1 - item.lastRank < 0 ? 'u-rnk-up' : '',
              index + 1 - item.lastRank > 0 ? 'u-rnk-dn' : '',
            ]"
            ><i :class="['u-icn', item.lastRank < 0 ? 'u-icn-new' : '']"></i
            >{{
              item.lastRank > 0 ? Math.abs(item.lastRank - index - 1) : ""
            }}</span
          >
        </div>
        <a class="col cvr u-cover u-cover-tiny" title="播放">
          <img :src="item.program.coverUrl" alt="" />
          <i class="ply f-pa f-dn f-alpha"></i>
        </a>
        <div class=" col cnt f-thide">
          <a
            href="javascript:;"
            @click="goRoute('/find/program/', item.program.id)"
            class="s-fc1"
            :title="item.program.mainSong.name"
            >{{ item.program.mainSong.name }}</a
          >
        </div>
        <div class="f-thide col artist">
          <a
            href="javascript:;"
            @click="goRoute('/find/djradio/', item.program.radio.id)"
            class="s-fc3"
            :title="item.program.radio.name"
            >{{ item.program.radio.name }}</a
          >
        </div>
        <div class="col tag">
          <a
            href="javascript:void(0);"
            class="u-type"
            @click="
              goRoute(
                '/find/newsradio/radiotype/',
                item.program.radio.categoryId
              )
            "
            >{{ item.program.radio.category }}</a
          >
        </div>
        <span class="col hot u-hot f-fl"
          ><i :style="{ width: item.width }"><i></i></i
        ></span>
      </li>
    </ul>
  </div>
</template>
<script>
// import mixins from "../../components/Mixin/mixin";
export default {
  props: ["topList"],
  // mixins: [mixins],
  data: () => ({
    nowDay: 110,
    base: 0,
  }),
  created() {
    this.nowDay = new Date().getDate();
  },
  methods: {},
};
</script>
<style lang="less" scoped></style>
